<template>
    <div class="w-full h-full" ref="wrapper">

    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { Viewer, LASLoaderPlugin } from '@xeokit/xeokit-sdk';

const wrapper = ref<HTMLDivElement>()

onMounted(() => {
    const canvas = document.createElement('canvas')
    canvas.width = wrapper.value!.offsetWidth
    canvas.height = wrapper.value!.offsetHeight
    wrapper.value!.appendChild(canvas)

    const viewer = new Viewer({
        canvasElement: canvas,
        transparent: true
    })


    const lasLoader = new LASLoaderPlugin(viewer, {
        colorDepth: 8,
        fp64: 0,
        skip: 1,
    })

    const modelEntity = lasLoader.load({
        id: 'lasModel',
        src: '/lidarData/11/11.las'
    })
})

</script>

<style lang='less' scoped>
</style>